<template>
  <el-dropdown trigger="click" @command="onDropdown">
    <span class="handler-dropdown">
      <el-button text><IconTranslate class="handler-icon"/></el-button>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item :disabled="language && language === 'zh'" command="zh">简体中文</el-dropdown-item>
				<el-dropdown-item :disabled="language === 'en'" command="en">English</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { vue } from '@core';
const { ref, computed, onMounted } = vue;
import { useI18n } from "vue-i18n";
import { getBrowserLang } from '@lib/i18n/useI18n'
import { storeToRefs } from 'pinia'
import { useMainStore } from '@views/fabric/store'
const mainStore = useMainStore()
const i18n = useI18n();
const language = computed(() => mainStore.language);

// 切换语言
const onDropdown = (lang) => {
  mainStore.updateLanguage(lang);
  i18n.locale.value = lang;
}

onMounted(() => {
	onDropdown(language.value || getBrowserLang());
});
</script>

<style  lang="scss" scoped>
.handler-icon {
  font-size: 16px;
  width: 18px;
}
</style>